import "./index.scss"
import PlaylistIcon from "@src/assets/playlist.svg?react"
import PlayBtn from "@src/components/playBtn"
import {useAudioPlayer} from "@src/store/music"

import {useState} from "react";
import Playlist from "@src/components/playlist"
import {useNavigate} from "react-router-dom";

export default function Player() {
    const [isOpen, setIsOpen] = useState(false);
    const {isPlaying, song} = useAudioPlayer()
    const navigate = useNavigate();
    return <div className="player">
        <div onClick={() => navigate("/home/music/SongDetail")}>
            <div className="picture centered" style={{animationPlayState: isPlaying ? 'running' : 'paused'}}>
                <img src={song?.al.picUrl} alt=""/>
            </div>
            <p className="text-overflow-1">{song?.name} <span>-{song?.ar[0].name}</span></p>
        </div>
        <div>
            <PlayBtn songs={song}></PlayBtn>
            <PlaylistIcon onClick={() => setIsOpen(true)}></PlaylistIcon>
        </div>
        <Playlist isOpen={isOpen} setIsOpen={setIsOpen}></Playlist>
    </div>
}